<template>
	<view style="overflow: hidden;">
		<view class="list">
			<view class="list_personal" @tap="bindIos" style="border-bottom: 1px solid #f5f5f5;" v-if="source==2">
				<view style="width: 140px;"><text>绑定Apple{{' '}}ID</text></view>
				<view class="list_personal_right">
					<text class="bindText">{{untieWx.isBindIOS==1?"已绑定":"未绑定"}}</text>
					<uni-icons class="list_personal_icon" color="#b9b9b9" type="forward" size="25"></uni-icons>
				</view>
			</view>
			<!-- 绑定微信 -->
			<view class="list_personal" @tap="bindWx" style="border-bottom: 1px solid #f5f5f5;">
				<view><text>绑定微信</text></view>
				<view class="list_personal_right">
					<text class="bindText">{{untieWx.isBindWX==1?"已绑定":"未绑定"}}</text>
					<uni-icons class="list_personal_icon" color="#b9b9b9" type="forward" size="25"></uni-icons>
				</view>
			</view>
			<!-- 检测新版本 -->
			<!-- #ifdef APP-PLUS || H5 -->
			<view class="list_personal" @tap="detectVersion">
				<view class="detectAgent"><text>版本更新</text></view>
				<view class="list_personal_right">
					<text v-if="version">{{version}}</text>
					<uni-icons class="list_personal_icon" color="#b9b9b9" type="forward" size="25"></uni-icons>
				</view>
			</view>
			<!-- #endif -->
			<view class="list_personal" @click="gotoDeatil" style="border-bottom: 1px solid #f5f5f5;">
				<view><text>修改密码</text></view>
				<view class="list_personal_right">
					<uni-icons class="list_personal_icon" color="#b9b9b9" type="forward" size="25"></uni-icons>

				</view>
			</view>
			<!-- 关于我们 -->
			<view class="list_personal" @tap="gotoUs" style="border-bottom: 1px solid #f5f5f5;">
				<view><text>关于我们</text></view>
				<view class="list_personal_right">
					<uni-icons class="list_personal_icon" color="#b9b9b9" type="forward" size="25"></uni-icons>
				</view>
			</view>
			<!-- 隐私政策 -->
			<view class="list_personal" @tap="privacyPolicy" style="border-bottom: 1px solid #f5f5f5;">
				<view><text>隐私政策</text></view>
				<view class="list_personal_right">
					<uni-icons class="list_personal_icon" color="#b9b9b9" type="forward" size="25"></uni-icons>
				</view>
			</view>
		</view>
		<view class="outLogin" @click="clickOut">退出登录</view>
		<uni-popup ref="popupT" type="center">
			<view class="canceAccount">
				<view class="canceText">
					<h2>是否退出当前账号</h2>
				</view>
				<view class="popBox">
					<view @click="canceLogout">取消</view>
					<view class="popBoxActive" @click="outLogin">确定</view>
				</view>
			</view>
		</uni-popup>
		<!-- 解绑微信弹窗 -->
		<uni-popup ref="popupWx" type="center">
			<view class="unbindWechat">
				<text>提{{' '}}醒</text>
				<text>是否解绑当前微信号</text>
				<view class="widthWx">
					<view @click="unbindWx">
						<text>取消</text>
					</view>
					<view class="suerBackground" @click="suerBind">
						<text>确定</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupIos" type="center">
			<view class="unbindWechat">
				<text>提{{' '}}醒</text>
				<text>是否解绑当前Apple ID</text>
				<view class="widthWx">
					<view @click="unbindIos">
						<text>取消</text>
					</view>
					<view class="suerBackground" @click="untieAppleID">
						<text>确定</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		CurrentRouter
	} from '@/config/CurrentRouter.js'
	export default {
		data() {
			return {
				userId: '',
				version: '', // 版本号
				untieWx: {},
				androidIos: ''
			};
		},
		onLoad() {
			let version = uni.getStorageSync('app-version')
			if (version) this.version = version
			this.androidIos = getApp().globalData.androidIos
			this.source = getApp().globalData.source
		},
		onShow() {
			this.userId = this.userInfo.id
			this.WxUnionid()
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			...mapMutations(['emptyUserInfo']),
			// 退出登录
			outLogin() {
				let userCode = CurrentRouter({
					show: false
				})
				let _that = this
				this.$httpNew
					.post('authApi/auth/LoginOutPutByApp', {
						appId: this.androidIos
					})
					.then(res => {
						if (res == null) {
							this.emptyUserInfo();
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}

					});
			},
			// 判断是否绑定微信,需要先调用GetUserInfo接口
			WxUnionid() {
				this.$httpNew.post('authApi/auth/GetUserInfo', {
					appId: this.androidIos
				}).then(res => {
					// console.log(res.wxUnionid,'陈o0LDcs8F9K5qZXVbXZ6aC5wq79Bw');
					this.untieWx = res
				})

			},
			// 判断是否绑定微信
			bindWx() {
				if (this.untieWx.isBindWX == 0) {
					uni.navigateTo({
						url: './../modules/bind_wechat'
					})
				} else {
					this.$refs.popupWx.open('center')

				}

			},
			// 判断是否绑定Apple ID
			bindIos() {
				if (this.untieWx.isBindIOS == 0) {
					uni.navigateTo({
						url: '/pages/modules/bindApple'
					})
				} else {
					this.$refs.popupIos.open('center')
				}
			},
			// 是否解绑当前Apple ID

			untieAppleID() {
				this.$httpNew.post('authApi/user/relieveIOSOpenId').then(res => {
					console.log(res, '是否解绑当前Apple ID');
					if (res == null) {
						this.WxUnionid()
						this.$refs.popupIos.close('center')
					}
				})

			},



			// 是否解绑当前微信号
			suerBind() {
				this.$httpNew.post('authApi/user/relieveWx').then(res => {
					console.log(res, '是否解绑当前微信号');
					if (res == null) {
						this.WxUnionid()
						this.$refs.popupWx.close('center')
					}
				})
			},
			// 检测新版本
			detectVersion() {
				// api/Home/GetAppVersion
				this.$http.get('api/Home/GetAppVersion').then(res => {
					console.log(res.versionname, 2222222222);
					// #ifdef APP-PLUS
					plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
						if (wgtinfo.version == res.versionname) {
							uni.setStorageSync('app-version', res.versionname)
							return
						}
						uni.navigateTo({
							url: `/pages/modules/update?code=${res.remarks}`,
						})
					})
					// #endif
					// #ifndef APP-PLUS
					uni.setStorageSync('app-version', res.versionname)
					// #endif
				})
			},
			unbindIos() {
				this.$refs.popupIos.close('center')
			},
			unbindWx() {
				this.$refs.popupWx.close('center')
			},
			// 打开弹出层
			clickOut() {
				this.$refs.popupT.open('center')
			},
			// 关闭弹框
			canceLogout() {
				this.$refs.popupT.close('center')
			},
			gotoDeatil() {
				uni.navigateTo({
					url: './../login/findCipher'
				});
			},
			// 打开隐私政策PDF
			privacyPolicy() {
				uni.navigateTo({
					url: './../login/userAgreement'
				})
			},
			// 点击跳转到关于我们
			gotoUs() {
				uni.navigateTo({
					url: './setaboutUs'
				})
			}

		}
	};
</script>

<style lang="less" scoped>
	.list {
		background-color: #fff;
	}

	.outLogin {
		height: 110rpx;
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
	}

	.list_personal_my {
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
		background-color: #fff;
		justify-content: space-between;
		padding: 30rpx 10rpx 30rpx 40rpx;
		align-items: center;
	}

	.list_personal {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 30rpx 10rpx 30rpx 40rpx;
		align-items: center;
		border-top: 1px solid #f5f5f5;

	}

	.detectAgent {
		width: 40%;
		// background-color: aqua;
	}

	.list_personal text {
		color: #333333;
		font-size: 32rpx;
	}

	.list_personal_right {
		display: flex;
		width: 60%;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;

		.bindText {
			color: #333333;
			font-size: 32rpx;
		}

		view {
			display: flex;
			align-items: center;
		}
	}

	.list_personal_icon {
		margin-left: 5%;
	}

	.head_img {
		width: 140rpx;
		height: 140rpx;
	}

	/* 是否退出当前账号 */
	.canceAccount {
		width: 600rpx;
		height: 400rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		/* margin: auto; */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.canceText {
		width: 100%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		// background-color: aqua;
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		// justify-content: space-around;
	}

	.popBox {
		margin: 50rpx 0 0 0;
		width: 95%;
		display: flex;
		justify-content: space-around;

		>view {
			width: 240rpx;
			height: 80rpx;
			background-color: #F9F9F9;
			text-align: center;
			line-height: 80rpx;
			border-radius: 90rpx;
		}

		>view:nth-child(2) {
			color: #B5001E;
		}

		.popBoxActive:active {
			background-color: #B5001E;
			color: #FFFFFF;
		}
	}

	// 解绑微信弹窗
	.unbindWechat {
		margin: auto;
		width: 600rpx;
		height: 300rpx;
		border-radius: 20rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-around;

		>text:nth-child(1) {
			text-align: center;
			font-size: 30rpx;
			font-weight: 700;
		}

		.widthWx {
			width: 100%;
			display: flex;
			justify-content: space-around;

			>view {
				width: 250rpx;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				border-radius: 100rpx;
				background-color: #f5f5f5;
			}

			>view:nth-child(2) {
				color: #B5001E;
				// background-color: aqua;
			}

			.suerBackground:hover {
				background-color: #B5001E;
				color: #FFF;
			}

		}
	}
</style>